<!-- 动态 lzq -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
			<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
			<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
			<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		
			<link rel="stylesheet" href="https://qzonestyle.gtimg.cn/aoi/icenter-yoo190131143813.css?max_age=31536000">  
			<link rel="stylesheet" href="https://qzonestyle.gtimg.cn/aoi/skin/31.css?max_age=19830212&d=20160530165317">  
	
	<!-- layui框架 -->
<link rel="stylesheet" href="css/layui.css" media="all">
 <link rel="stylesheet" href="css/layui.mobile.css" media="all">

<link id="layuicss-layer" rel="stylesheet" href="css/modules/layer/default/layer.css" media="all">
<link id="layuicss-skincodecss" rel="stylesheet" href="css/modules/code.css" media="all">

<script type="text/javascript" src="layui.js"></script>
	
	
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script>
	function onloding(){
	//加载层
	var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

	//loading层
	var index = layer.load(1, {
	  shade: [0.1,'#fff'] ,//0.1透明度的白色背景
	  time:1500
	});
	}
</script>

  <script type="text/javascript">
  layui.use('layer', function(){ //独立版的layer无需执行这一句
	  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
	});
  </script>

 <style type="text/css">
#child_header { background-color: #596591ab; border-bottom:#a4975e 2px solid; height: 32px; padding: 8px 4%; width: 92% }
#child_header .goback { float: left; width: 38% }
#child_header .goback i { height: 32px; width: 24px; float: left; background: url(images/index_icon/little_icon.png) no-repeat center; background-position: -18px 11px }
#child_header .current_location span, #child_header .next_operate span { color: #000000; text-decoration: none; font-size: 16px; line-height: 36px; float: left }
#child_header .current_location { }
#child_header .current_location a { display: block }
#child_header .current_location span { font-size: 18px; }
#child_header .next_operate { float: right }

body{
	background-color: #2e2e2e;
}


#imgPreview {
 width: 20%;
 height: 120px;
 margin: 10px 0px 0px 0px;
 border: 1px solid black;
 text-align: center;

}
#prompt3 {
 width: 100%;
 height: 120px;
 text-align: center;
 position: relative;
}
#imgSpan {
 position: absolute;
 top: 60px;
 left: 30px;
  margin-top: -18px;
}
.filepath {
 width: 100%;
 height: 100%;
 opacity: 0;
}
#img3 {
 height: 100%;
 width: 100%;
 display: none;
}
</style>

<script>
	//图片 上传
	
	var xhr ;
	//上传文件方法
	function upload() {
	//js获取文件对象
	var fileObj = document.getElementById ("file").files[0] ;
	//接收上传文件的后台地址
	var url = "addDynamic";
	//FormData的默认值为mul tipart/ form-data,所以不用去修改请求头
	var form = new FormData();
	// FormData对象
	form.append( "headImage",fileObj); // 文件对象
	var dynamic_detail = document.getElementById("text").value;
	form.append("dynamic_detail",dynamic_detail) ;
	// XMLHttpRequest 对象
	xhr = new XMLHttpRequest() ;
	//post方式，url为服务器请求地址，true该参数规定请求是否异步处理。
	xhr.open("post",url, true) ;
	xhr.send(form);
	
	setTimeout(showDynamics, 1500);
	}
	
	function changepic() {
		 $("#prompt3").css("display", "none");
		 var reads = new FileReader();
		 f = document.getElementById('file').files[0];
		 reads.readAsDataURL(f);
		 reads.onload = function(e) {
		 document.getElementById('img3').src = this.result;
		 $("#img3").css("display", "block");
		 };
		}
</script>





<script type="text/javascript">
	function addComment(dynamic_id){
		if($("#comment"+dynamic_id).val()!=""){
  		$.ajax({
			url:"/chat/addComment",
			data:{
				"dynamic_id":dynamic_id,
				"comment_detail" : $("#comment"+dynamic_id).val()
			},
			success:function(result){
				showDynamics();
			}
		})  
		}else {
			alert("没有输入内容");
		}
	}
	
	function writecomment(id){
	       var input = document.getElementById("comment"+id);
	       input.setAttribute("style", "height: 45px;width:400px;background-color:rgb(64,64,64);border-color: #393333;border-width=1px");
	       input.setAttribute("placeholder", "");
	}
	
	function losefocus(id){
			var input = document.getElementById("comment"+id);
			input.setAttribute("style", "height: 27px;width:400px ;background-color:#2e2e2e ;border-color: #393333;border-width=1px");
			input.setAttribute("placeholder", "评论");
	}
	
	function retransmission(id){
		$.ajax({

			url:"/chat/retransmission",
			data:{
				"dynamic_id":id
			},
			success:function(result){
				//alert("转发成功");
				onloding();
				setTimeout(showDynamics, 1500);
			}
		});
	}
	
		
	function praise(id){
		
		function praised(){
			
			var praised = $("#praised"+id).html();
			if(praised.search('我') != -1){
			
			var praise = document.getElementById("praise"+id);
			praise.setAttribute("style","background-image:url(https://qzonestyle.gtimg.cn/aoi/skin/sprite/31.32-yoo190131143813.png);background-position:-52px -921px;");
			}
			}
			
		$.ajax({
			url:"/chat/praise",

			data:{
				"dynamic_id":id
			},
			success:function(result){
			
				setTimeout(showDynamics, 500);
				 setTimeout(praised,711); 

			}
		});
	}
	
</script>

<script type="text/javascript">
	//图文加载
	$(function(){
		
		showDynamics();
	});
		
		
		function showDynamics(){
		$.ajax({
			url:"/chat/display",
			success:function(dto){
				var users = dto.users;
				var dynamics = dto.dynamics;
				var content ="";
				for(var i=0;i<users.length;i++){
					var user = users[i];
					var dynamic = dynamics[i];
					var commentUsers = dynamic.commentUsers;
					var comments = dynamic.comments;
					var praise = dynamic.dynamic_praise;
					if($.isEmptyObject(praise)||praise==""){
						praise = "";
					}else{
						if(praise.search(user.user_name) != -1){
							praise = praise.replace(user.user_name,'我')
						}
						praise=praise+"觉得很赞";
					}

					content+='<div class="container" style="margin-top: 20px;"><div class="row clearfix"><div class="col-xs-6 column" style="width: 15%;">'
						   +'<a href="someoneinfo?uid='+user.user_id+'"><img alt="140x140" src="'+user.user_headimg+'" class="img-circle" style="height: 60px;width: 60px;"/></a></div>'
						   +'<div class="col-xs-6 column"><h3>'+user.user_name+'</h3></div></div>'
						   +'<div class="row clearfix"><div class="col-md-12 column" >'
						   +'<h3 style="margin-top: 20px;margin-bottom: 20px;">'+dynamic.dynamic_detail+'</h3></div></div>'
						   +'<div class="row clearfix"><div class="col-md-4 column"><img alt="140x140" src="'+dynamic.img1+'" /></div></div></div>'
						   +'<div class="container" ><div class="row clearfix" ><div class="col-md-6 column" style="width: 20%;float: left;">'
						   +'<h3>浏览1000次</h3></div><div class="col-md-6 column" style="border-bottom:#1f1f1f 1.5px solid;margin-top: 9px;">'
						   +'<div class="feed  feed-v9" style="margin-left: 380px;" ><li class="fui-icon icon-op-praise" onclick="praise('+dynamic.dynamic_id+')" id="praise'+dynamic.dynamic_id+'"></li>'
						   +'<label for="comment'+dynamic.dynamic_id+'"><li class="fui-icon icon-op-comment" style="margin-left: 20px;margin-top: 5px;"></li></label><li class="fui-icon icon-op-share" style="margin-left: 20px;" onclick="retransmission('+dynamic.dynamic_id+')"></li></div></div></div>'
						   +'<div class="row clearfix"><div class="col-md-12 column"><h3 id=praised'+dynamic.dynamic_id+'>'+praise+'</h3></div></div>'
					
					for(var k=0;k<commentUsers.length;k++){
						var commentUser = commentUsers[k];
						var commentname=commentUser.user_name
						if(commentname==user.user_name){
							commentname="我";
						}
						var comment = comments[k];

						content+='<div class="container" style="margin-top: 10px"><div class="row clearfix"><div class="col-md-6 column" >'
							   +'<a href="someoneinfo?uid='+commentUser.user_id+'" style="display:inline-block; " ><img alt="140x140" src="'+commentUser.user_headimg+'" class="img-circle" style="height: 40px;width: 40px;"/></a></div>'
							   +'<div class="col-md-6 column" style="float:right;margin-right: 440px;bottom: 35px;"><p><h3>'+commentname+':'+comment.comment_detail+'</h3></p>'
							   +'<p style="margin-top: 8px;">'+comment.comment_createtime.substring(5,16).replace("T"," ")+'</p></div></div></div>'
				
					}
						   
					content+='<div class="col-md-12 column" style="float: left;"><input type="text"  placeholder="评论" style="height: 27px;width:400px ;background-color:#2e2e2e ;border-color: #393333;border-width=1px" id="comment'+dynamic.dynamic_id+'" onfocus="writecomment('+dynamic.dynamic_id+')" onblur="losefocus('+dynamic.dynamic_id+')"/></div>'
						   +'<a><div class="glyphicon glyphicon-camera "  style="font-size: 24px;margin-left: 50px;" onclick="addComment('+dynamic.dynamic_id+')" ></div></a></div>';
					
				}
				$("#dynamics").html(content);
			}
		
		});
		}
	
</script>



</head>
<body >

	<div id="child_header" style="height: 40px;padding-top: 4px;width: 100%">
                <div class="goback"><a href="http://localhost:9999/chat/main"><i></i></a></div>
                <div class="current_location"><span style="margin-left: 50px;">动态</span><span class="feed  feed-v9">
                <span class="fui-icon icon-op-comment" style="margin-left: 230px;margin-top: 6px;"
                data-toggle="modal" data-target="#fileupload"></span></span></div>
            </div>
            
	<!-- <button class="layui-btn" onclick="upload()" style="line-height:normal;height: 28px;width: 50px;padding: 0">发表</button> -->
	
	<br><br><br><br><br>
	
	<div id="dynamics"></div>
	
		
<!-- 模态框（Modal） -->
<div class="modal fade" id="fileupload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h2 class="modal-title" id="myModalLabel" style="font-size: 140%;font-weight:900">
					发表图文
				</h2>
			</div>
			<div class="modal-body">
				<!-- 上传图文信息 -->
	<textarea rows="5" cols="35" id="text" placeholder="说点什么吧" name="dynamic_detail" style="background-color:#e8e8e870;border-color: #c6636333;border-width=1px"></textarea>
	<!-- <input type="file" value="上传" id="file" name="file"/>	 -->
					<div id="imgPreview">
				 <div id="prompt3">
				 <span id="imgSpan">
				 点击上传
				  <br />
				  <span class="feed  feed-v9">
				 <i class="fui-icon icon-op-share"></i>
				 </span>
				  <!--AUI框架中的图标-->
				 </span>
				 <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
				 <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
				 </div>
				 <img src="#" id="img3" />
				</div>
	
	
	<br />
	
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary" onclick="upload()" data-dismiss="modal">
					发表
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>


<hr />
</body>
</html>